<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    
    <!--  -->

    <!--  -->
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
              
              <div class="alert alert-danger">
                  <button type="button" class="close" adta-dismiss="alert" aria-hidden="true">&times;</button>
                  <h4 style="margin-top: 0;">网站程序有漏洞,急需修复</h4>
                  
                  <p>当前版本程序(v.122)存在安全问题，容易受到攻击，请立即修复！</p>
                  <button class="btn btn-danger">立即处理</button> <button class="btn btn-default" data-miss="">稍后处理</button>
              </div>
            </div>
            <div class="row">
               <div class="col-ma-6">
                    
                    <div class="panel panel-default">
                        <!-- Default panel contents -->
                        <div class="panel-heading">Panel heading</div>
                            <div class="panel-body">
                               
                            
                    
                            <!-- Table -->
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Heading 1</th>
                                        <th>Heading 1</th>
                                        <th>Heading 1</th>
                                    </tr>
                                  
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>Content 1</th>
                                        <td>Content 1</td>
                                        <td>Content 1</td>
                                    </tr>
                                    <tr>
                                        <th>Content 1</th>
                                        <td>Content 1</td>
                                        <td>Content 1</td>
                                    </tr>
                                    <tr>
                                        <th>Content 1</th>
                                        <td>Content 1</td>
                                        <td>Content 1</td>
                                    </tr>
                                    <tr>
                                        <th>Content 1</th>
                                        <td>Content 1</td>
                                        <td>Content 1</td>
                                    </tr>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                 </div>
               <div class="col-ma-6">

                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">Panel heading</div>
                        <!-- <div class="panel-body"> -->
                           
                        
                
                        <!-- Table -->
                        <table class="table">
                            <thead>
                                <tr>
                                   <td>
                                       <a href="#">
                                           <span class="glyphicon glyphicon-list-alt"></span>
                                           contant
                                           <span class="pull-right">2012-12-23</span>
                                       </a>
                                   </td>
                                </tr>
                              
                            </thead>
                            <tbody>
                                <tr>
                                   
                                    <td>Content 1</td>
                                    
                                </tr>
                                <tr>
                                   
                                    <td>Content 1</td>
                                </tr>
                                <tr>
                                  
                                    <td>Content 1</td>
                                </tr>
                                <tr>
                                   
                                    <td>Content 1</td>
                                </tr>
                                
                            </tbody>
                        </table>
                    </div>
                </div>

               </div>

            </div>

            <div id="main" style="width: 1000px; height: 400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  
        // 指定图表的配置项和数据
        var option = {
  title: {
    text: '今日访客统计'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      </script>


    
        

        </div>
    </div>

    

    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
   
</body>
</html>